<template>
  <div class="customer-list-container">
    <!-- 顶部统计栏 -->
    <div class="stats-bar" v-loading="statsLoading">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">客户总数</div>
              <div class="stat-value">{{ statistics.total }}</div>
              <div class="stat-trend">今日新增 {{ todayNew }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">有效客户</div>
              <div class="stat-value">{{ statistics.active }}</div>
              <div class="stat-trend">跟进中 {{ statistics.to_follow }}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">会员客户</div>
              <div class="stat-value">{{ statistics.member_customers || 0 }}</div>
              <div class="stat-trend">有效法务套餐</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-title">案件委托客户</div>
              <div class="stat-value">{{ statistics.case_customers || 0 }}</div>
              <div class="stat-trend">有委托案件</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 页面标题和操作 -->
    <div class="header">
      <h2>客户管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleAdd">新增客户</el-button>
        <el-button @click="handleExport">导出数据</el-button>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div class="filter">
      <el-form :model="filterForm" inline>
        <!-- 基础搜索 -->
        <el-form-item label="关键词">
          <el-input
            v-model="filterForm.keyword"
            placeholder="客户名称/法人/电话/邮箱"
            clearable
            style="width: 250px"
            @keyup.enter="handleSearch"
          />
        </el-form-item>

        <!-- 负责人/客户类型 -->
        <el-form-item label="管家">
          <el-select
            v-model="filterForm.user_id"
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="user in userOptions"
              :key="user.id"
              :label="user.name"
              :value="user.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="客户类型">
          <el-select v-model="filterForm.type" placeholder="请选择" clearable style="width: 120px">
            <el-option label="个人" :value="15" />
            <el-option label="企业" :value="16" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button
            @click="toggleAdvancedFilter"
            :icon="advancedFilterVisible ? ArrowUp : ArrowDown"
          >
            {{ advancedFilterVisible ? '收起' : '高级筛选' }}
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 高级筛选展开区 -->
      <el-collapse-transition>
        <div v-show="advancedFilterVisible" class="advanced-filter">
          <el-form :model="filterForm" inline>
            <el-form-item label="会员状态">
              <el-select
                v-model="filterForm.member_status"
                placeholder="请选择"
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="item in customerStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="客户来源">
              <el-select
                v-model="filterForm.source"
                placeholder="请选择"
                clearable
                style="width: 150px"
              >
                <el-option
                  v-for="item in importedSourceOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间">
              <el-date-picker
                v-model="createTimeRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 240px"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-transition>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-actions" v-show="selectedCustomers.length > 0">
      <el-checkbox v-model="selectAll" @change="handleSelectAll">
        全选 ({{ selectedCustomers.length }})
      </el-checkbox>
      <el-button size="small" @click="handleBatchAssign">分配负责人</el-button>
      <el-button size="small" @click="handleBatchAddTag">添加标签</el-button>
      <el-button size="small" @click="handleBatchExport">导出选中</el-button>
    </div>

    <!-- 客户列表 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />

      <el-table-column prop="name" label="客户名称" min-width="180">
        <template #default="{ row }">
          <div class="customer-name">
            <span class="name-text">{{ row.name }}</span>
            <el-tag v-if="row.important_level === 3" type="danger" size="small">关键</el-tag>
            <el-tag v-else-if="row.important_level === 2" type="warning" size="small">重要</el-tag>
          </div>
          <div class="customer-tags">
            <el-tag v-for="tag in row.tags" :key="tag" size="small" effect="plain">
              {{ tag }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type_label" label="类型" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.type_tag_type" size="small">
            {{ row.type_label }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="grade_name" label="等级" width="80" align="center"></el-table-column>
      <el-table-column prop="source_name" label="来源" width="100" align="center"></el-table-column>
      <el-table-column prop="belong_name" label="管家" width="100" align="center" />

      <el-table-column prop="followup_info" label="跟进状态" width="120">
        <template #default="{ row }">
          <div v-if="row.days_since_followup !== null">
            <el-icon color="#909399"><Clock /></el-icon>
            <span
              :class="{
                'text-warning': row.days_since_followup > 7,
                'text-danger': row.days_since_followup > 30,
              }"
            >
              {{ row.days_since_followup }}天未跟进
            </span>
          </div>
          <div v-else class="text-secondary">-</div>
          <div class="text-secondary" style="font-size: 12px">
            累计{{ row.followup_count || 0 }}次
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="customer_status" label="会员状态" width="140">
        <template #default="{ row }">
          <div v-if="statusService.isValidMemberStatus(row.customer_status)">
            <el-tag type="success" size="small">
              <el-icon><CircleCheck /></el-icon>
              {{ row.customer_status_name || '未知' }}
            </el-tag>
            <div
              v-if="row.membership_days_remaining > 0"
              class="text-secondary"
              style="font-size: 12px; margin-top: 4px"
            >
              剩余 {{ Math.ceil(row.membership_days_remaining / 86400) }} 天
            </div>
          </div>
          <div v-else-if="statusService.isExpiredMemberStatus(row.customer_status)">
            <el-tag type="warning" size="small">
              <el-icon><Clock /></el-icon>
              过期会员
            </el-tag>
            <div
              v-if="row.membership_end_time > 0"
              class="text-danger"
              style="font-size: 12px; margin-top: 4px"
            >
              已过期
              {{ Math.ceil((Math.floor(Date.now() / 1000) - row.membership_end_time) / 86400) }} 天
            </div>
          </div>
          <div v-else>
            <el-tag type="info" size="small">
              <el-icon><CircleClose /></el-icon>
              非会员
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="contract_info" label="合同信息" width="180">
        <template #default="{ row }">
          <div v-if="row.contract_num > 0" class="contract-info">
            <div class="contract-summary">
              <span class="contract-num">{{ row.contract_num }}</span>
              个合同，
              <span class="contract-amount">{{ formatAmount(row.contract_amount) }}</span>
            </div>
            <div
              v-if="row.latest_contract_type"
              class="text-secondary"
              style="font-size: 12px; margin-top: 2px"
            >
              {{ row.latest_contract_type }}
            </div>
            <div
              v-if="row.latest_contract_sign_time"
              class="text-secondary"
              style="font-size: 12px"
            >
              {{ formatDate(row.latest_contract_sign_time) }}
            </div>
          </div>
          <div v-else class="text-secondary">-</div>
        </template>
      </el-table-column>

      <el-table-column prop="case_info" label="案件信息" width="180">
        <template #default="{ row }">
          <div v-if="row.case_num > 0" class="case-info">
            <div class="case-summary">
              <span class="case-num">{{ row.case_num }}</span>
              个案件
              <el-tag
                v-if="row.case_processing > 0"
                type="warning"
                size="small"
                style="margin-left: 4px"
              >
                进行中 {{ row.case_processing }}
              </el-tag>
              <el-tag
                v-if="row.case_finished > 0"
                type="success"
                size="small"
                style="margin-left: 4px"
              >
                已结案 {{ row.case_finished }}
              </el-tag>
            </div>
            <div
              v-if="row.latest_case_title"
              class="text-secondary"
              style="font-size: 12px; margin-top: 2px"
            >
              {{ row.latest_case_title }}
            </div>
            <div v-if="row.latest_case_status" class="text-secondary" style="font-size: 12px">
              状态：{{ getCaseStatusLabel(row.latest_case_status) }}
            </div>
          </div>
          <div v-else class="text-secondary">-</div>
        </template>
      </el-table-column>

      <el-table-column prop="create_time" label="创建时间" width="140" show-overflow-tooltip />

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleDetail(row)">查看</el-button>
          <el-dropdown size="small">
            <el-button type="default" size="small">
              更多
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                  编辑
                </el-dropdown-item>
                <el-dropdown-item @click="handleFollowup(row)">
                  <el-icon><ChatDotRound /></el-icon>
                  跟进
                </el-dropdown-item>
                <el-dropdown-item @click="handleAddOpportunity(row)">
                  <el-icon><Plus /></el-icon>
                  新增机会
                </el-dropdown-item>
                <el-dropdown-item divided></el-dropdown-item>
                <el-dropdown-item @click="handleDelete(row)" style="color: #f56c6c">
                  <el-icon><Delete /></el-icon>
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :page-sizes="[20, 50, 100, 200]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 客户跟进抽屉 -->
    <TraceDrawer
      v-model="traceDrawerVisible"
      :customer-id="currentCustomerId || 0"
      mode="add"
      size="60%"
      @success="handleTraceSuccess"
    />

    <!-- 销售机会抽屉 -->
    <ChanceDrawer
      v-model="chanceDrawerVisible"
      :customer-id="currentCustomerId || 0"
      mode="add"
      size="60%"
      @success="handleChanceSuccess"
    />

    <!-- 客户详情抽屉 -->
    <GlobalDrawer
      v-model="customerDetailDrawerVisible"
      title="客户详情"
      size="80%"
      :destroy-on-close="true"
    >
      <CustomerDetail
        :customer-id="currentCustomerId ? String(currentCustomerId) : ''"
        :is-drawer="true"
      />
    </GlobalDrawer>

    <!-- 客户编辑/新增抽屉 -->
    <CustomerDrawer
      v-model="customerDrawerVisible"
      :customer-id="currentCustomerId ? String(currentCustomerId) : ''"
      :customer-data="customerDataForDrawer"
      :mode="currentCustomerId ? 'edit' : 'add'"
      size="80%"
      @success="handleCustomerSuccess"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed, nextTick } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    ArrowDown,
    ArrowUp,
    Clock,
    Edit,
    ChatDotRound,
    Plus,
    Delete,
    CircleCheck,
    CircleClose,
    View,
  } from '@element-plus/icons-vue'
  import { customerApi, type Customer, type CustomerListParams } from '@/api/customer'
  import { statusService } from '@/utils/statusService'
  import TraceDrawer from '@/components/business/customer/TraceDrawer.vue'
  import ChanceDrawer from '@/components/business/customer/ChanceDrawer.vue'
  import CustomerDrawer from '@/components/business/customer/CustomerDrawer.vue'
  import CustomerDetail from '@/views/customer/detail/index.vue'
  import { GlobalDrawer } from '@/components/common'
  // 从脚本中导入选项数据
  import {
    adminOptions as userOptions,
    customerStatusOptions,
    sourceOptions as importedSourceOptions,
    loadOptions,
  } from './CustomerListScript'

  // 响应式数据
  const loading = ref(false)
  const statsLoading = ref(false)
  const tableData = ref<Customer[]>([])
  const selectedCustomers = ref<Customer[]>([])
  const selectAll = ref(false)
  const advancedFilterVisible = ref(false)

  // 抽屉组件状态
  const traceDrawerVisible = ref(false)
  const chanceDrawerVisible = ref(false)
  const customerDrawerVisible = ref(false)
  const customerDetailDrawerVisible = ref(false)
  const currentCustomerId = ref<number | null>(null)
  const customerDetailData = ref<any>(null)
  const activeTab = ref('contacts') // 当前激活的标签页

  // 为CustomerDrawer准备的计算属性
  const customerDataForDrawer = computed(() => {
    return customerDetailData.value
  })

  // 筛选表单
  const filterForm = reactive<CustomerListParams>({
    page: 1,
    limit: 20,
    keyword: '',
    user_id: undefined,
    department_id: undefined,
    level: undefined,
    important_level: undefined,
    status: undefined,
    is_cooperation: undefined,
    industry: '',
    scale: '',
    source: '',
    followup_filter: '',
    tags: [],
    customer_status: '',
    business_type: '',
    type: undefined,
  })

  // 时间范围
  const createTimeRange = ref<[Date, Date] | null>(null)
  const cooperationTimeRange = ref<[Date, Date] | null>(null)

  // 分页
  const pagination = reactive({
    page: 1,
    limit: 20,
    total: 0,
  })

  // 统计数据
  const statistics = reactive({
    total: 0,
    active: 0,
    cooperation: 0,
    to_follow: 0,
    overdue: 0,
    conversion_rate: 0,
    member_customers: 0,
    case_customers: 0,
  })

  const todayNew = ref(0)

  // 选项数据（从脚本中导入）
  // userOptions = adminOptions
  // sourceOptions = importedSourceOptions
  const tagOptions = ref<string[]>([])

  // 方法
  const handleSearch = () => {
    pagination.page = 1
    loadData()
  }

  const handleReset = () => {
    Object.assign(filterForm, {
      page: 1,
      limit: 20,
      keyword: '',
      user_id: undefined,
      department_id: undefined,
      level: undefined,
      important_level: undefined,
      status: undefined,
      is_cooperation: undefined,
      industry: '',
      scale: '',
      source: '',
      followup_filter: '',
      tags: [],
      customer_status: '',
      business_type: '',
      type: undefined,
    })
    createTimeRange.value = null
    cooperationTimeRange.value = null
    handleSearch()
  }

  const toggleAdvancedFilter = () => {
    advancedFilterVisible.value = !advancedFilterVisible.value
  }

  const loadData = async () => {
    loading.value = true
    try {
      const params = { ...filterForm }

      // 处理时间范围
      if (createTimeRange.value) {
        params.create_time_start = createTimeRange.value[0].getTime()
        params.create_time_end = createTimeRange.value[1].getTime()
      }
      if (cooperationTimeRange.value) {
        params.cooperation_time_start = cooperationTimeRange.value[0].getTime()
        params.cooperation_time_end = cooperationTimeRange.value[1].getTime()
      }

      const response = await customerApi.getCustomerList(params)
      tableData.value = response.data.list || []
      pagination.total = response.data.total || 0
    } catch (error) {
      console.error('加载客户列表失败:', error)
      ElMessage.error('加载客户列表失败')
    } finally {
      loading.value = false
    }
  }

  // 防重复请求状态管理
  const statisticsRequestCache = ref<{
    promise: Promise<any>
    timestamp: number
  } | null>(null)

  const loadStatistics = async () => {
    const currentTime = Date.now()

    // 检查是否已有请求正在进行中
    const existingRequest = statisticsRequestCache.value
    if (existingRequest) {
      const timeDiff = currentTime - existingRequest.timestamp
      // 如果请求在5分钟内，直接返回缓存的Promise
      if (timeDiff < 5 * 60 * 1000) {
        console.log('统计数据请求已在进行中，返回缓存的Promise')
        try {
          await existingRequest.promise
          return
        } catch (error) {
          // 如果缓存的请求失败，继续执行新的请求
          console.log('缓存的统计数据请求失败，执行新的请求')
        }
      } else {
        // 缓存过期，移除
        statisticsRequestCache.value = null
      }
    }

    statsLoading.value = true

    // 创建新的请求Promise
    const requestPromise = (async () => {
      try {
        const response = await customerApi.getStatistics()
        Object.assign(statistics, response.data)
      } catch (error) {
        console.error('加载统计数据失败:', error)
      } finally {
        statsLoading.value = false
      }
    })()

    // 缓存请求
    statisticsRequestCache.value = {
      promise: requestPromise,
      timestamp: currentTime,
    }

    // 执行请求
    await requestPromise
  }

  // 使用脚本中的loadOptions函数
  // loadOptions 已从脚本中导入

  // 工具方法
  const getLevelType = (level: number) => {
    const types = { 1: 'info', 2: 'warning', 3: 'danger' }
    return types[level as keyof typeof types] || 'info'
  }

  const getLevelLabel = (level: number) => {
    const labels = { 1: '普通', 2: '重要', 3: '核心' }
    return labels[level as keyof typeof labels] || '普通'
  }

  const formatAmount = (amount: number) => {
    if (!amount) return '0'
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY',
      minimumFractionDigits: 0,
    }).format(amount)
  }

  const formatDate = (timestamp: number | string) => {
    if (!timestamp) return '-'
    const date = typeof timestamp === 'number' ? new Date(timestamp * 1000) : new Date(timestamp)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  }

  const getCaseStatusLabel = (status: number) => {
    const statusMap: Record<number, string> = {
      1: '咨询中',
      2: '已签约',
      3: '进行中',
      4: '已完成',
      5: '已结案',
      6: '已终止',
    }
    return statusMap[status] || '未知'
  }

  // 事件处理
  const handleSelectionChange = (selection: Customer[]) => {
    selectedCustomers.value = selection
  }

  const handleSelectAll = (value: boolean) => {
    // 全选逻辑
  }

  const handleSizeChange = (size: number) => {
    filterForm.limit = size
    loadData()
  }

  const handleCurrentChange = (page: number) => {
    filterForm.page = page
    loadData()
  }

  // 页面事件
  const handleAdd = () => {
    // 新增客户 - 打开新增抽屉
    currentCustomerId.value = null
    customerDrawerVisible.value = true
  }

  const handleEdit = async (row: Customer) => {
    // 编辑客户 - 打开编辑抽屉
    currentCustomerId.value = row.id
    customerDetailData.value = null

    try {
      // 预加载客户详情数据，避免重复请求
      console.log('开始预加载客户详情数据，customerId:', row.id)
      const response = await customerApi.getCustomerDetail({ id: row.id, contract_workflow: 1 })
      if (response && response.code === 0 && response.data) {
        customerDetailData.value = response.data
        console.log('客户列表页面：预加载客户详情数据成功')
        console.log('预加载数据：', customerDetailData.value)
        console.log('customerDataForDrawer 计算属性值：', customerDataForDrawer.value)
      } else {
        console.log('客户列表页面：预加载客户详情数据失败，response:', response)
        ElMessage.error('加载客户详情数据失败')
        return // 预加载失败时不打开抽屉
      }
    } catch (error) {
      console.error('加载客户详情失败:', error)
      ElMessage.error('加载客户详情失败')
      return // 出错时不打开抽屉
    }

    // 确保数据被正确设置后再打开抽屉
    await nextTick()

    console.log('准备打开客户编辑抽屉')
    console.log('currentCustomerId:', currentCustomerId.value)
    console.log('customerDetailData.value:', customerDetailData.value)
    console.log('customerDataForDrawer.value:', customerDataForDrawer.value)

    customerDrawerVisible.value = true
  }

  const handleDetail = async (row: Customer) => {
    // 查看详情 - 打开详情抽屉
    currentCustomerId.value = row.id
    customerDetailData.value = null

    // 直接打开详情抽屉，让详情组件自己处理数据加载，避免重复请求
    customerDetailDrawerVisible.value = true
  }

  const handleDelete = (row: Customer) => {
    // 删除客户
    ElMessageBox.confirm(`确认要删除客户"${row.name}"吗？`, '删除确认', {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        ElMessage.success('删除成功')
      })
      .catch(() => {
        ElMessage.info('已取消删除')
      })
  }

  const handleExport = () => {
    // 导出数据
    ElMessage.info('导出数据功能')
  }

  const handleBatchAssign = () => {
    // 批量分配
    ElMessage.info('批量分配功能')
  }

  const handleBatchAddTag = () => {
    // 批量添加标签
    ElMessage.info('批量添加标签功能')
  }

  const handleBatchExport = () => {
    // 批量导出
    ElMessage.info('批量导出功能')
  }

  const handleFollowup = (row: Customer) => {
    // 跟进 - 打开跟进抽屉
    currentCustomerId.value = row.id
    traceDrawerVisible.value = true
  }

  const handleAddOpportunity = (row: Customer) => {
    // 新增机会 - 打开机会抽屉
    currentCustomerId.value = row.id
    chanceDrawerVisible.value = true
  }

  // 跟进抽屉成功回调
  const handleTraceSuccess = () => {
    ElMessage.success('跟进记录添加成功')
    // 可选：刷新数据
    loadData()
  }

  // 机会抽屉成功回调
  const handleChanceSuccess = () => {
    ElMessage.success('销售机会添加成功')
    // 可选：刷新数据
    loadData()
  }

  // 客户抽屉成功回调
  const handleCustomerSuccess = () => {
    ElMessage.success('客户操作成功')
    // 刷新数据
    loadData()
  }

  // 子客户点击事件
  const handleSubCustomerClick = (row: any) => {
    ElMessage.info(`查看子客户: ${row.name}`)
    // 这里可以实现跳转到子客户详情页面的逻辑
  }

  // 标签页相关事件处理
  const handleAddContact = () => {
    ElMessage.info('新增联系人功能')
    // 这里可以打开新增联系人抽屉
  }

  const handleAddTrace = () => {
    // 打开跟进抽屉
    if (currentCustomerId.value) {
      traceDrawerVisible.value = true
    }
  }

  const handleAddChance = () => {
    // 打开销售机会抽屉
    if (currentCustomerId.value) {
      chanceDrawerVisible.value = true
    }
  }

  const handleAddContract = () => {
    ElMessage.info('新增合同功能')
    // 这里可以打开新增合同抽屉
  }

  const handleAddLawcase = () => {
    ElMessage.info('新增案件功能')
    // 这里可以打开新增案件抽屉
  }

  // 生命周期
  onMounted(() => {
    loadData()
    loadStatistics()
    loadOptions()
  })
</script>

<style scoped>
  .customer-list-container {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
  }

  /* 统计栏样式 */
  .stats-bar {
    margin-bottom: 20px;
  }

  .stat-card {
    text-align: center;
  }

  .stat-content {
    padding: 10px 0;
  }

  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 4px;
  }

  .stat-trend {
    font-size: 12px;
    color: #909399;
  }

  /* 页面标题 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 4px;
  }

  .header h2 {
    margin: 0;
    font-size: 20px;
    color: #303133;
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }

  /* 筛选区域 */
  .filter {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
  }

  .advanced-filter {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
  }

  /* 批量操作栏 */
  .batch-actions {
    background: white;
    padding: 12px 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* 客户名称 */
  .customer-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }

  .name-text {
    font-weight: 500;
    color: #303133;
  }

  .customer-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }

  /* 业务统计 */
  .business-stats {
    font-size: 13px;
    line-height: 1.6;
  }

  .text-primary {
    color: #409eff;
  }

  .text-secondary {
    color: #909399;
    font-size: 12px;
  }

  .text-warning {
    color: #e6a23c;
  }

  .text-danger {
    color: #f56c6c;
  }

  /* 合同信息 */
  .contract-info {
    font-size: 12px;
    line-height: 1.5;
  }

  .contract-summary {
    font-weight: 500;
  }

  .contract-num {
    color: #409eff;
    font-weight: 600;
  }

  .contract-amount {
    color: #67c23a;
    font-weight: 500;
  }

  /* 案件信息 */
  .case-info {
    font-size: 12px;
    line-height: 1.5;
  }

  .case-summary {
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .case-num {
    color: #409eff;
    font-weight: 600;
  }

  /* 分页 */
  .pagination {
    background: white;
    padding: 20px;
    text-align: right;
    border-radius: 4px;
  }

  /* 客户详情抽屉样式 */
  .customer-detail-content {
    padding: 0;
  }

  .info-section {
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
  }

  .info-descriptions {
    margin-top: 10px;
  }

  /* 标签页样式 */
  .customer-tabs {
    margin-top: 24px;
  }

  .tab-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }

  .loading-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
  }
</style>
